<template>
	<!-- 图片数字 -->
	<view class="u-flex">
		<view v-for="(item,i) in numberImageList" :key="i"  class="u-position-relative u-flex">
			<u-icon :name="item.icon" custom-prefix="index-custom-icon" :size="size" :color="color"></u-icon>
			<!-- <u-image :src="img.icon" mode="heightFix" height="30" :fade="false" :show-loading="false"></u-image> -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"imageNumber",
		props: {
			number: {
				type: [Number,String],
				default: 0
			},
			//'a-1' 根据iconfont仓库图标整理 如index-custom-icon-a-1 index-custom-icon-a-11 index-custom-icon-a-2 index-custom-icon-a-21 
			type:{
				type:String,
				default: '' 
			},
			size:{
				type:[String,Number],
				default:30
			},
			color:{
				type:String,
				default: '#333333'
			}
		},
		computed: {
			//返回需要显示的数字
			numberImageList(){
				const num = this.number;
				const typeSting = this.type
				const number = num<10 ? `0${num}` : `${num}`;
				// index-custom-icon-a-6
				return number.split('').map(val=>({icon:`a-${val}${typeSting}`,num:val}))
			}
		},
	}
</script>

<style lang="scss">

</style>
